@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        .Va-container-content {
            height: 72vw;
        }
        .icons-type-list{
            width: 350px;
            overflow: hidden;
            padding: 0;
        }
        .icons-type-one{
            border-radius: unset !important;
            border: 1px solid #ccc;
            padding: 10px 10px;
            margin: 2px;
        }
        .icons-type-list .icons-type-one.is-checked{
            border: 1px solid var(--buttonHoverColors);
        }
    </style>
@endpush
@section("content")
    <div class="form-container">
        <div class="form-container-header">
            <el-form :inline="true" :model="tables.search" size="small">
                <el-form-item>
                    <el-input v-model="tables.search.keyword" placeholder="按名称关键词搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="tables.search.status" placeholder="-- 按状态搜索 --" clearable>
                        <el-option label="状态(全部)" value=""></el-option>
                        <el-option key="1" label="启用" value="1"></el-option>
                        <el-option key="2" label="禁用" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="tablesSearchEvent"><i class="fa fa-search"></i> 搜 索
                    </el-button>
                    <el-button size="small" @click="tablesResetsEvent"><i class="fa fa-refresh"></i> 重 置</el-button>
                </el-form-item>

                <el-row class="options-right">
                    <el-button size="small" type="primary" v-if="permissions.list_page" @click="tablesListPageUpdate">
                        <i :class="permissions.list_page.icon"></i> @{{permissions.list_page.name}}
                    </el-button>

                    <el-button size="small" type="primary" v-if="permissions.insert" @click="tablesRowsInsert">
                        <i :class="permissions.insert.icon"></i> @{{permissions.insert.name}}
                    </el-button>
                </el-row>

            </el-form>
        </div>
        <div class="form-container-main inline-tables no-pic" v-loading="tables.options.loading">
            <el-table
                    :data="tables.data"
                    border
                    :stripe="true"
                    @selection-change="tablesSelectChange"
                    @sort-change="tablesPaginationSortChange"
                    @cell-click="tablesCellMoveEvent"
                    tooltip-effect="dark"
                    ref="formContainerTables"
                    row-key="id">
                <el-table-column prop="name" label="合作伙伴名称" align="center">
                </el-table-column>

                <el-table-column prop="image" label="图片" align="center">
                    <template slot-scope="scope">
                        <va-image :src="scope.row.image" :key="scope.row.image" class="tables-image"></va-image>
                    </template>
                </el-table-column>

                <el-table-column prop="status" label="移动方向" align="center" width="160">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 2" size="mini" type="danger" effect="plain">向右</el-tag>
                        <el-tag v-if="scope.row.status == 1" size="mini" type="success" effect="plain">向左</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="sort" label="排序" align="center" width="180" sortable>
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.sort" size="mini"
                                         @change="tablesRowsSort(scope.row)"></el-input-number>
                    </template>
                </el-table-column>

                <el-table-column prop="status" label="状态" align="center" width="160">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 2" size="mini" type="danger" effect="plain">禁用</el-tag>
                        <el-tag v-if="scope.row.status == 1" size="mini" type="success" effect="plain">启用</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="updated_at" label="更新时间" align="center" :formatter="formatTableDate" width="180"
                                 sortable></el-table-column>
                <el-table-column prop="created_at" label="创建时间" align="center" :formatter="formatTableDate" width="180"
                                 sortable></el-table-column>

                <el-table-column prop="options" label="操作" align="left" width="160" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" warning type="text" @click="tablesRowsUpdate(scope.row)"
                                   v-if="permissions.update">
                            <i :class="permissions.update.icon"></i> @{{permissions.update.name}}
                        </el-button>
                        {{-- 更多操作 --}}
                        <el-dropdown size="small" style="margin-left: 10px">
                            <el-button size="mini" primary type="text"><i class="fa fa-reorder "></i> 更多操作<i
                                        class="el-icon-arrow-down el-icon--right"></i></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-if="permissions.status">
                                    <el-button size="mini" warning type="text"
                                               @click="tablesRowsStatus(scope.row,{id:scope.row.id})"
                                               v-if="permissions.status" :disabled="scope.row.is_system==1">
                                        <i :class="permissions.status.icon"></i>
                                        @{{tables.status.maps[scope.row.status]}}
                                    </el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-if="permissions.remove">
                                    <el-button size="mini" danger type="text" @click="tablesRowsRemove(scope.row)"
                                               v-if="permissions.remove" :disabled="scope.row.is_system==1">
                                        <i :class="permissions.remove.icon"></i> @{{permissions.remove.name}}
                                    </el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        {{-- 更多操作 End. --}}
                    </template>
                </el-table-column>
            </el-table>
            {!! \App\Master\Framework\View\AdminUi::pagination() !!}
        </div>
    </div>
@endsection
{{--  扩展页面  --}}
@section("page")

    @include('admin.arts.manage.web_partner.forms')
    @include('admin.arts.manage.web_partner.list_page')

@endsection
@push('scripts')
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config, $Layouts, $Tables, $DrawerForms],
            data: {
                component: {status: false},
                config: {permissions: true},
                tables: {
                    remove: {url: 'arts/manage/web_partner/remove', msg: '确认删除当前数据吗？', field: 'id'},
                    status: {url: 'arts/manage/web_partner/status', field: 'status'},
                    sort:{url:'arts/manage/web_partner/rank', item:'sort', field:'id'},
                    url: 'arts/manage/web_partner', search: {}, pagination: {layout: ''},
                    prop: 'sort,created_at', orderBy: 'desc'
                },
                create: {
                    drawer: false, loading: false, action: '#',
                    model: {name: '', content: '', sort: 255},
                    rules: {
                        name: [
                            {required: true, message: '合作伙伴名称', trigger: 'blur'}
                        ],
                        image: [
                            {required: true, message: '请选择图片', trigger: 'blur'}
                        ]
                    }
                },
                list_page:{
                    __table: '',
                    dialog: false, loading: false, action: '#',
                    model: {name: '', desc: ''},
                    rules: {
                        name: [
                            {required: true, message: '请输入名称', trigger: 'blur'}
                        ]
                    }
                }
            },
            methods: {
                tablesRowsInsert() {
                    var that = this;
                    that.create.action = 'arts/manage/web_partner/insert';
                    that.create.model = {name: '', image: '',direction:'1', link: '', sort: 255};
                    that.drawerFormsOpens('create');
                },

                tablesRowsUpdate(rows) {
                    var that = this;
                    that.create.action = 'arts/manage/web_partner/update';
                    that.create.model = {
                        id: rows.id,
                        name: rows.name,
                        image: rows.image,
                        direction: rows.direction + '',
                        link: rows.link,
                        sort: rows.sort,
                    };
                    that.drawerFormsOpens('create');
                },

                tablesListPageUpdate() {
                    var that = this;
                    that.list_page.__table = 'web_partner';
                    that.list_page.action = 'arts/manage/web_partner/list_page';
                    that.list_page.model = {
                        __table: that.list_page.__table,
                        name: '',
                        desc: ''
                    };
                    that.dialogListPageFormsOpens('list_page');
                },

                tablesResetsEvent() {
                    var that = this;
                    that.tables.search = {keyword: '', status: ''};
                    that.tablesGetTableList();
                },
            },
            created() {
            },
            mounted() {

            }
        })
    </script>
@endpush